<link rel="stylesheet" href="__STATIC__/css/login.css?v={:sysValue('version')}" media="all">
<div class="main-body">
    <div class="login-main">
        <div class="login-top">
            <span>{:sysValue('name')}</span>
            <span class="bg1"></span>
            <span class="bg2"></span>
        </div>
        <form class="layui-form login-bottom">
            <div class="center">
                <div class="item">
                    <span class="icon icon-2"></span>
                    <input type="text" name="username" lay-verify="required" value="{$username|default=''}"
                           placeholder="{:lang('common.input')}{:lang('login.username')}" maxlength="24"/>
                </div>

                <div class="item">
                    <span class="icon icon-3"></span>
                    <input type="password" name="password" lay-verify="required"
                           placeholder="{:lang('common.input')}{:lang('login.password')}" maxlength="20">
                    <span class="bind-password icon icon-4"></span>
                </div>

                {if $captcha == 1}
                <div id="validatePanel" class="item" style="width: 137px;">
                    <input type="text" name="captcha" lay-verify="required"
                           placeholder="{:lang('common.input')}{:lang('login.captcha')}" maxlength="4">
                    <img id="refreshCaptcha" class="validateImg" src="{:url('login/captcha')}"
                         onclick="this.src='{:url(\'login/captcha\')}?seed='+Math.random()">
                </div>
                {/if}
            </div>
            <div class="tip">
                <span class="icon-nocheck"></span>
                <span class="login-tip">{:lang('login.keep')}</span>
                <a href="javascript:" class="forget-password"></a>
            </div>
            <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
                <button class="login-btn" lay-submit lay-filter="login">{:lang('login.btnLogin')}</button>
            </div>
        </form>
    </div>
</div>
<div class="footer">
    {:sysValue('copyright')}<span class="padding-5">|</span>
    <a target="_blank" href="https://beian.miit.gov.cn">{:sysValue('beian')}</a>
</div>
<style>
    body {
        background: url("{:sysValue('login_bg')}") 0% 0% / cover no-repeat;
    }
    .login-main .login-top, .login-main .login-bottom .login-btn {
        background-color: {:sysValue('login_color')};
    }
</style>
<script src="{:sysValue('cdn')}/fingerprintjs2/2.1.4/fingerprint2.min.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'jquery', 'myCommon'], function () {
        let $ = layui.jquery
            , myCommon = layui.myCommon;

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        //将浏览器指纹写入cookie
        Fingerprint2.get(function (components) {
            let fp = Fingerprint2.x64hash128(components.map(function (pair) {
                if (pair.key == 'deviceMemory') {
                    return ''
                }
                return pair.value
            }).join(), 31);
            document.cookie = "fingerprint=" + fp + '; path=/';
        });

        if ($('input[name="username"]').val() == '') {
            $('input[name="username"]').focus();
        } else {
            $('input[name="password"]').focus();
        }

        $('.bind-password').on('click', function () {
            if ($(this).hasClass('icon-5')) {
                $(this).removeClass('icon-5');
                $("input[name='password']").attr('type', 'password');
            } else {
                $(this).addClass('icon-5');
                $("input[name='password']").attr('type', 'text');
            }
        });

        $('.icon-nocheck').on('click', function () {
            if ($(this).hasClass('icon-check')) {
                $(this).removeClass('icon-check');
            } else {
                $(this).addClass('icon-check');
            }
        });
        $('.login-tip').on('click', function () {
            $('.icon-nocheck').click();
        });

        myCommon.listen(function (data) {
            data['keep_login'] = $('.icon-nocheck').hasClass('icon-check') ? 1 : 0;
            return data;
        }, function (res) {
            myCommon.msg.success(res.msg, function () {
                window.location = myCommon.url('index');
            })
        }, function (res) {
            myCommon.msg.error(res.msg, function () {
                $('#refreshCaptcha').trigger("click");
            });
        });
    });
</script>